<template>
	<view class="uni-container">
		<uni-forms ref="form" :model="formData" validateTrigger="bind" label-width="120px">
			<uni-forms-item name="name" label="规则名称" required>
				<uni-easyinput placeholder="考勤规则名称" v-model="formData.name"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="work_start_time" label="上班时间" required>
				<uni-data-select v-model="formData.work_start_time" :localdata="start_range"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="work_end_time" label="下班时间" required>
				<uni-data-select v-model="formData.work_end_time" :localdata="end_range"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="late_minutes" label="迟到分钟数">
				<uni-easyinput placeholder="超过多少分钟算迟到" type="number" v-model="formData.late_minutes"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="early_minutes" label="早退分钟数">
				<uni-easyinput placeholder="提前多少分钟算早退" type="number" v-model="formData.early_minutes"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="location_range" label="打卡范围">
				<uni-easyinput placeholder="允许打卡的距离范围(米)" type="number"
					v-model="formData.location_range"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="allowed_locations" label="允许打卡坐标">
				<uni-easyinput placeholder="输入经纬度,逗号分隔，如112.3321,32.143"  v-model="formData.allowed_locations"></uni-easyinput>
			</uni-forms-item>
<!-- 			
			<uni-forms-item name="enable_gps" label="启用GPS">
				<switch @change="binddata('enable_gps', $event.detail.value)" :checked="formData.enable_gps"></switch>
			</uni-forms-item> -->
			<uni-forms-item name="is_default" label="默认规则">
				<switch @change="binddata('is_default', $event.detail.value)" :checked="formData.is_default">
				</switch>
			</uni-forms-item>
			<uni-forms-item name="is_active" label="是否启用">
				<switch @change="binddata('is_active', $event.detail.value)" :checked="formData.is_active"></switch>
			</uni-forms-item>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;">
					<button class="uni-button" style="width: 100px;">返回</button>
				</navigator>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		validator
	} from '../../js_sdk/validator/mydb-attendance-rules.js';

	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = 'mydb-attendance-rules';

	function getValidator(fields) {
		let result = {}
		for (let key in validator) {
			if (fields.includes(key)) {
				result[key] = validator[key]
			}
		}
		return result
	}



	export default {
		data() {
			let formData = {
				"name": "",
				"work_start_time": "8:00",
				"work_end_time": "18:00",
				"late_minutes": 10,
				"early_minutes": 10,
				"location_range": 500,
				"allowed_locations": "",
				"is_default": true,
				"enable_gps": true,
				"department_ids": [],
				"is_active": true
			}
			return {
				formData,
				formOptions: {},
				start_range: [{
						value: "8:00",
						text: "8:00"
					},
					{
						value: "8:30",
						text: "8:30"
					},
					{
						value: "9:00",
						text: "9:00"
					},
					{
						value: "10:00",
						text: "10:00"
					},
				],
				end_range: [{
						value: "17:00",
						text: "17:00"
					},
					{
						value: "17:30",
						text: "17:30"
					},
					{
						value: "18:00",
						text: "18:00"
					},
					{
						value: "18:30",
						text: "18:30"
					},
				],
				rules: {
					...getValidator(Object.keys(formData))
				}
			}
		},
		onLoad(e) {
			if (e.id) {
				const id = e.id
				this.formDataId = id
				this.getDetail(id)
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			binddata(k, val) {
				this.formData[k] = val
			},
			/**
			 * 验证表单并提交
			 */
			submit() {
				uni.showLoading({
					mask: true
				})
				this.$refs.form.validate().then((res) => {
					return this.submitForm(res)
				}).catch(() => {}).finally(() => {
					uni.hideLoading()
				})
			},

			/**
			 * 提交表单
			 */
			submitForm(value) {
				// 使用 clientDB 提交数据
				return db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
					uni.showToast({
						title: '修改成功'
					})
					this.getOpenerEventChannel().emit('refreshData')
					setTimeout(() => uni.navigateBack(), 500)
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			},

			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName).doc(id).get().then((res) => {
					const data = res.result.data[0]
					if (data) {
						this.formData = data

					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>